<template>
  <Dialog
    v-model:visible="formShow"
    :title="`定制客户信息`"
    width="50vw"
    top="30vh"
  >
    <Form
      :validateOnBlur="false"
      as="div"
      :key="indexNum"
      :initial-values="formValues"
      class="formDiv"
      :validation-schema="schema"
      v-slot="{ validate, values, resetForm }"
    >
      <Field name="name" v-slot="{ field }">
        <div class="left">
          姓名
          <input
            class="input"
            v-bind="field"
            placeholder="请输入姓名"
          /><ErrorMessage class="errorMsg" name="name" />
        </div>
      </Field>
      <Field name="phone" v-slot="{ field }">
        <div class="left">
          电话
          <input
            class="input"
            v-bind="field"
            placeholder="请输入电话"
          /><ErrorMessage class="errorMsg" name="phone" />
        </div>
      </Field>
      <Field name="stature" v-slot="{ field }">
        <div class="left">
          身高
          <input
            class="input"
            v-bind="field"
            placeholder="请输入身高"
          /><ErrorMessage class="errorMsg" name="stature" />
        </div>
      </Field>
      <Field name="weight" v-slot="{ field }">
        <div class="left">
          体重
          <input
            class="input"
            v-bind="field"
            placeholder="请输入体重"
          /><ErrorMessage class="errorMsg" name="weight" />
        </div>
      </Field>

      <div class="add-btn">
        <Button
          class="button thumb"
          size=".09rem"
          background="linear-gradient(0deg, #232481, #3644bf)"
          @click="() => save(validate, values, resetForm)"
          >保存</Button
        >

        <Button
          class="reset-button thumb"
          size=".09rem"
          color="#3644bf"
          background="white"
          @click="() => resetForm()"
          >重置</Button
        >
      </div>
    </Form>
  </Dialog>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import Dialog from "@/components/Dialog/index.vue";

import { Form, Field, ErrorMessage } from "vee-validate";
import Button from "@/components/Button/index.vue";
import * as yup from "yup";
import { validateRule } from "@/utils/util";
import {  Form as FormInterface, Customer } from "../../interface";
import { toast } from "vue3-toastify";


const schema = yup.object().shape({
  name: yup.string().required("姓名不为空").max(20, "最多为20个字符"),
  phone: yup
    .string()
    .required("电话号码不为空")
    .matches(validateRule(`phone`), "请输入正确的手机号"),
  stature: yup
    .string()
    .test("stature", "不能超过1000", (value) => {
      return value === "" || value === undefined || Number(value) <= 1000
        ? true
        : false;
    })
    .test("stature", "最多两位小数", (value) => {
      return value === "" ||
        value === undefined ||
        validateRule("float2").test(value)
        ? true
        : false;
    })
    .test("stature", "必须为数字", (value) => {
      return value === "" ||
        value === undefined ||
        Number(value) === Number(value)
        ? true
        : false;
    }),
  weight: yup
    .string()
    .test("stature", "不能超过1000", (value) => {
      return value === "" || value === undefined || Number(value) <= 1000
        ? true
        : false;
    })
    .test("stature", "最多两位小数", (value) => {
      return value === "" ||
        value === undefined ||
        validateRule("float2").test(value)
        ? true
        : false;
    })
    .test("stature", "必须为数字", (value) => {
      return value === "" ||
        value === undefined ||
        Number(value) === Number(value)
        ? true
        : false;
    }),
});

const formMod: FormInterface = {
  name: "",
  phone: "",
  stature: "",
  weight: "",
};

const formValues = ref<FormInterface>(formMod);

const formShow = ref<boolean>(false);

const indexNum = ref<number>(-1);

const emits = defineEmits<{
  (event: "resetHeight"): void;
  (event: "save", formData: FormInterface,index:number): void;
}>();

const save = async (validate: any, values: any, resetForm: any) => {
  const { valid } = await validate();
  if (!valid) return toast.error("表单信息填写错误");
  toast.success(`保存成功`);
  formShow.value = false;
  emits(`save`, values,indexNum.value);
  resetForm();
};

const open = (formData: Customer | undefined = undefined,index:number = -1) => {
  formValues.value = formData !== undefined ? formData : formMod;
  indexNum.value = index;
  formShow.value = true;
  
};

defineExpose({ open });
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
